.swatch {
	position: relative;
	z-index: 1;
	display: inline-block;
	vertical-align: calc(-.1em - 3px);
	padding: .6em;
	background-color: var(--color);
	border: 3px solid white;
	border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(0,0,0,.15)
}

.oog {
	border: 3px dashed;
	color:  #c00;
	padding: 0;
	width: 1.2em;
	height: 1.2em;
	background-color: #ccc;
}

.oog::before {
	content: "Out of gamut";
	display: inline-block;
	text-transform: uppercase;
	text-align: center;
	font: bold .3em/1.2 sans-serif;
}

.swatch:hover,
.swatch:focus {
	transform: scale(3);
	border-radius: 2px;
	transition: .4s;
	z-index: 2;
}

table.gamuts tr:hover {
	background: papayawhip;
}
